<template>
	<view class="box">
		<view class="top">
			<u-navbar :is-back="true" title="商品详情"></u-navbar>
		</view>
		<view class="wrap">
			<u-swiper :list="list" mode="number" indicator-pos="bottomRight" height="750" duration="2000"
				:circular="true"></u-swiper>
		</view>
		<view class="info">
			<view class="name cxc">
				商品名称商品名称
			</view>
			<view class="point">
				5680积分
			</view>
		</view>
		<view class="detail_title">
			商品图文详情
		</view>
		<view class="detail container_B" v-if="content">
			<mp-html :content="content"></mp-html>
		</view>
		<view class="btns">
			<view class="btn" @click="show = true">
				立即兑换
			</view>
		</view>
		<addressPopup ref="address" :address-list="addressList" @select="onSelected" @edit="onEditAddress"
			@add="onNewAddress"></addressPopup>
		<u-popup v-model="show" mode="bottom" border-radius="20" :closeable="true" height="750">
			<view class="popBox">
				<view class="goodsInfo flc">
					<view class="left">
						<u-image width="178rpx" height="178rpx" src="" :lazy-load="true"></u-image>
					</view>
					<view class="right ml2">
						<view class="name">
							商品名称商品名称商品名称商品名称大
							米5kg
						</view>
						<view class="point ">
							5680积分
						</view>
					</view>
				</view>
				<view class="addressBox">
					<view class="address" @click="onShowAddress">
						<view class="title">
							收货地址
						</view>
						<view class="addressInfo mtb2">
							<view class="addressCt jsbc">
								<view class="ct flc">
									<u-icon name="map" size="26" color="#666"></u-icon>
									<span class="ml2">贵州省贵阳市花果园金融街5号27楼2701号 </span>
								</view>
								<u-icon name="arrow-right" size="26" color="#666"></u-icon>
							</view>
							
						</view>
						<view class="user">
							<span>赵先生</span>
							<span class="ml2">17678688788</span>
						</view>
					</view>
				</view>
				<view class="numBox jsbc">
					<view class="name">
						数量
					</view>
					<view class="num">
						<u-number-box v-model="number" @change="valChange"></u-number-box>
					</view>
				</view>
				<view class="btn">
					<view class="btn" @click="show = true">
						立即兑换
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		format
	} from '../../utils/common';
	import addressPopup from "@/components/address-popup.vue"
	export default {
		components: {
			addressPopup
		},
		data() {
			return {
				addressList: [],
				address:"",
				addressId:"",
				show: false,
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				number: 1,
				content: '<p><img src="https://cdn.uviewui.com/uview/swiper/1.jpg"/></p>'
			};
		},
		methods: {
			onShowAddress() {
				this.show = false
				this.$refs.address.open();
			},
			onNewAddress() {
				// this.$utils.jump('/other/add-address/add-address?type=0');
				uni.navigateTo({
					url: '/other/add-address/add-address?type=0'
				})
			},
			onSelected(item) {
				this.show = true
				this.address = item;
				this.addressId = item.id;
			},
			onEditAddress(item) {
				// this.$utils.jump(');
				uni.navigateTo({
					url: '/other/add-address/add-address?type=1&id=' + item.id
				})
			},
			goAddress() {
				uni.navigateTo({
					url: '/other/delivery-address/delivery-address'
				})
			},
			valChange(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info {
		width: 750rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding: 30rpx;

		.name {
			font-size: 32rpx;
			color: #333333;
		}

		.point {
			font-size: 34rpx;
			color: #FD4120;
			margin-top: 10rpx;
		}
	}

	.detail_title {
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		width: 750rpx;
		background-color: #fff;
		margin-top: 20rpx;
	}

	.btns {
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -10rpx 20rpx 0rpx rgba(238, 238, 238, 0.36);
		box-sizing: border-box;
		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		position: fixed;
		bottom: 0;
		left: 0;

		.btn {
			margin: 5rpx auto;
			width: 710rpx;
			height: 70rpx;
			background: linear-gradient(90deg, #FD4120, #F47749);
			border-radius: 35rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 70rpx;
		}
	}

	.popBox {
		width: 750rpx;
		height: 750rpx;
		box-sizing: border-box;
		overflow: hidden;
		padding: 46rpx 20rpx 20rpx 20rpx;
		background-color: #fff;
		position: relative;

		.goodsInfo {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #dedede;

			.left {
				width: 178rpx;
				height: 178rpx;
			}

			.right {
				height: 178rpx;
				width: 440rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name {
					font-size: 28rpx;
					color: #333333;
					width: 440rpx;
					overflow: hidden;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}

				.point {
					font-weight: 500;
					font-size: 34rpx;
					color: #FD4120;
				}
			}
		}

		.addressBox {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #dedede;

			.title {
				font-size: 30rpx;
				color: #333333;
			}

			.addressInfo .addressCt {
				font-size: 30rpx;
				color: #333333;
			}

			.addressInfo .user {
				font-size: 30rpx;
				color: #333333;
			}
			
		}
		.numBox{
			margin-top: 40rpx;
			font-size: 30rpx;
			color: #333333;
		}

		.btn {
			width: 710rpx;
			height: 70rpx;
			background: linear-gradient(90deg, #FD4120, #F47749);
			border-radius: 35rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 70rpx;
			position: fixed;
			bottom: calc(24rpx + env(safe-area-inset-bottom));
			left: 20rpx;
		}
	}
</style>